<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>vuex的安装和使用</h4>
        <ol>
            <li>下载安装vuex对应版本的模块文件，完成加载；加载完成后提供Vuex仓库构成对象</li>
            <li>通过全局对象Vuex值createStore方法创建共享仓库对象,返回的是基于vue插件语法开发的集成对象</li>
            <li>通过vue创建应用对象，调用use插件安装方法，完成store的安装集成【app.config.globalProperties.$store=……】</li>
            <li>所以在vue的任意一个组件中，通过this.$store都可以直接访问到共享仓库对象</li>
            <li>在store仓库对象的state中构建用于共享的数据变量</li>
        </ol>
        <input type="button" value="打印vuex仓库对象" @click="printStore()">
        <br>
        <input type="button" value="打印vuex仓库对象中msg变量" @click="printStoreMsg()">
        <br>
        <p>vuex-msg:{{ $store.state.msg }}</p>
        <p>vuex-computed-newMsg:{{ newMsg }}</p>
        <p>vuex-computed-num:{{ num }}</p>
        <p>vuex-computed-arr:{{ arr }}</p>
        <p>vuex-computed-user:{{ user }}</p>

        <comp-a></comp-a>
    </div>
    <script type="text/x-template" id="compA">
        <div class="cbox">
            <h4>子组件</h4>
            <p>vuex-computed-msg:{{ msg }}</p>
            <p>vuex-computed-num:{{ num }}</p>
            <p>vuex-computed-arr:{{ arr }}</p>
            <p>vuex-computed-user:{{ user }}</p>
        </div>
    </script>
    <script src="../../assets/vue3/vue.global.js"></script>
    <script src="../../assets/vuex4/vuex.global.js"></script>
    <script>
        console.log("Vuex:",Vuex)

        const store = Vuex.createStore({
            state:{
                // 共享的数据状态仓库
                msg:"vuex的共享数据",
                num:100,
                arr:[1,2,3,4],
                user:{
                    name:"tom"
                }
            }
        })
        console.log("store:",store)
        let tempOption = Vuex.mapState(["num","arr","user"]) 
        console.log("mapState:",tempOption)
        console.log( tempOption.num )

        const CompA = {
            template:"#compA",
            computed: {
                ...Vuex.mapState(["msg","num","arr","user"])
            },
        }

        Vue.createApp({
            components: {
                CompA,
            },
            data(){
                return {
                    
                }
            },
            // computed: Vuex.mapState(["num","arr","user"]),
            computed: {
                ...Vuex.mapState(["num","arr","user"]),
                newMsg() {
                    return this.$store.state.msg
                }
            },
            methods: {
                printStore() {
                    console.log(this.$store);
                },
                printStoreMsg(){
                    console.log(this.$store.state.msg);
                }
            },
        })
        .use(store)
        .mount("#app")
    </script>
</body>
</html>